<script>

import UniLink from "../../../../../uni_modules/uni-link/components/uni-link/uni-link.vue";
import UFormItem from "../../../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import { uploadFile } from "../../../../../static/utils/uploadImg";
import {
  getCitysByProIdApi,
  getDistrictsByCityIdApi,
  getLngLatByAddressApi,
  getProvinceListApi
} from "../../../../../api/common/location";
import {
  findAllPlan,
  getCustomerEntryDetail,
  getProjectInfoDetailApi,
  saveOrEditCustomerEntry
} from "../../../../../api/customer";
import { STATION_STATUS } from "../constant";
import DateSelect from "../../../../../components/base/date-select/index.vue";
import URow from "../../../../../uni_modules/uview-ui/components/u-row/u-row.vue";
import {AZIMUTH, PLAN_TYPE} from "../../../../../constant";
import UText from "../../../../../uni_modules/uview-ui/components/u-text/u-text.vue";
import {
  getAgentListApi,
  getElectricPlanAll,
  getPlanDetail as getPlanDetailApi
} from "../../../../../api/common/power-station";
// import material from "./material/index.vue";
import { filerImageUrlParams } from "../../../../../static/utils/handleImage";
import citySelect from "../../../../../components/business/city-select/index.vue";
import uSelect from "../../../../../components/base/u-select/index.vue";
// import project from "./project/index.vue";
// import house from "./house/index.vue";
import ModuleCard from "../../../../../components/business/module-card/index.vue";
// import owner from "./owner/index.vue";
import {basePowerStationInfo} from "../../constant/power-station";
import {getUserInfoApi} from "../../../../../api/common/user";
import {getProjectListApi} from "../../../../../api/common/product";
import {getProjectCompanyList} from "../../../../../api/common/company";
import imageUpload from "../../../../../components/base/image-upload/index.vue";
import UIcon from "../../../../../uni_modules/uview-ui/components/u-icon/u-icon.vue";
import capacity from "./material/capacity/index.vue";


const disc = {
  'zjs': 'assemblyList',
  'zhij': 'gridSupportList',
  'boxs': 'gridConnectionList',
  'inverters': 'inverterList',
}
export default {
  name: "index",
  props: {
    // stationId: {
    //   type: String,
    //   default: '',
    // },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    PLAN_TYPE() {
      return PLAN_TYPE
    },
    AZIMUTH() {
      return AZIMUTH
    },
    editable() {
      return this.$props.disabled
    },
  },
  components: {
    capacity,
    UIcon,
    imageUpload,
    ModuleCard,
    UText, URow, UFormItem, UniLink, DateSelect,
    citySelect, uSelect,
  },
  data(){
    return {
      id: '',
      cityPickData: [],
      // projectListVisible: false,
      userId: '',
      // disabled: false,
      formData: {
        projectCode: '', // 产品编码
        projectName: '', // 产品名称
        projectId: '', // 产品id
        productLineName: '', // 产品线名称
        powerStationCode: null, // 电站编码
        companyId: '', // 所属公司
        payCycle: '', // 租金支付方式 1按月支付 2按季支付 3按年支付
        beianMode: 1, // 备案方式 0.自然人备案 1.项目公司备案
        beianCapacity: '', // 备案装机容量
        teamworkLimit: 0, // 合作年限 0、25年
        rentStandard: 0, // 租金标准：0.10元/块·年
        filingNumber: '', // 备案号
        createTime: '', // 登记时间
        tenantName: '', // 业主姓名
        mobile: '', // 联系电话
        idCode: '', // 身份证号
        address: '', // 业主地址
        longitude: '', // 经度
        latitude: '', // 纬度
        idCardFront: '', // 身份证正面
        idCardBack: '', // 身份证反面
        bankName: '', // 开户银行
        bankNumber: '', // 开户行行号
        bankBranch: '', // 开户支行
        bankCode: '', // 银行账号
        bankCard: '', // 银行卡照片
        projectCompanyId: '', // 所属项目公司id

        buildingStructure: '', // 房屋结构
        kingpostType: '', // 主梁类型
        roofType: '', // 屋顶类型
        houseType: '', // 房屋类型
        shootType: '', // 拍摄方式
        noFlyImgList: [], // 禁飞图片 返回来是列表
        noFlyImgs: '', // 禁飞图片
        noFlyImgs1: '', // 禁飞图片
        roofPhotoOne: '', // 屋顶照片
        roofValue: '', // 屋顶视频
        whitePaperPhoto: '', // 用户手持明白纸照片
        houseOwnership: '', // 房屋所有权
        houseOwnershipOne: '', // 房屋所有权
        houseOwnershipTwo: '', // 房屋所有权
        surveyRecord: '', // 踏勘记录
        surveyRecord2: '', // 踏勘记录
        surveyRecord3: '', // 踏勘记录
        buildingHeight: '', // 建筑高度
        repaymentMethod: '', // 还款方式
        filingDocumentPhoto: '', // 备案文件照片
        filingDocumentPhoto2: '', // 备案文件照片
        filingDocumentPhoto3: '', // 备案文件照片
        roofPhotoTwo: '', // 屋顶照片
        roofPhotoThree: '', // 屋顶照片
        roofPhotoFour: '', // 屋顶照片
        roofPhotoInterior: '', // 屋顶照片
        dimensionsPhotoThickness: '', // 尺寸照片
        roofPhotoFive: '', // 屋顶照片
        roofPhotoSix : '', // 屋顶照片

        schemeType: '', // 设计方案
        schemeTypeName: '', // 设计方案名称
        schemeTypeId: '', // 设计方案id
        schemeId: '', // 方案id
        componentSpec: '', // 组件规格
        distance: '', // 并网距离
        attach2: '', // 附件
        composePlanVOList: [
          {
            planType: '', // 方案类型
            name: '', // 方案名称
            attach: '', // 附件
            planId: '', // 方案id
          }
        ], // 设计方案
        designDrawings: '', // 设计图纸
        remarks: '', // 备注
        schemeRemarks: '', // 方案备注
        status: 0, // 状态 0.暂存
        itemList: [],
        componentNum: 0, // 组件数量
        generatorNo: '', // 户号
        schemeName: '', // 方案名称
      },
      rules: {
        // bankName: [
        //   {required: true, message: '请输入开户银行', trigger: 'blur'},
        // ],
        // bankNumber: [
        //   {required: true, message: '请输入开户行行号', trigger: 'blur'},
        // ],
        // bankBranch: [
        //   {required: true, message: '请输入开户支行', trigger: 'blur'},
        // ],
        // bankCode: [
        //   {required: true, message: '请输入银行账号', trigger: 'blur'},
        // ],
        projectId: [
          {required: true, message: '请选择产品', trigger: 'blur'},
        ],
        tenantName: [
          {required: true, message: '请输入业主姓名', trigger: 'blur'},
        ],
        // mobile: [
        //   {required: true, message: '请输入联系电话', trigger: 'blur'},
        // ],
        // idCode: [
        //   {required: true, message: '请输入身份证号', trigger: 'blur'},
        // ],
        // address: [
        //   {required: true, message: '请输入业主地址', trigger: 'blur'},
        // ],
        // idCardFront: [
        //   {required: true, message: '请上传身份证正面', trigger: 'blur'},
        // ],
        // idCardBack: [
        //   {required: true, message: '请上传身份证反面', trigger: 'blur'},
        // ],
        // bankCard: [
        //   {required: true, message: '请上传银行卡照片', trigger: 'blur'},
        // ],
        // projectCompanyId: [
        //   {required: true, message: '请选择所属项目公司', trigger: 'blur'},
        // ],
        // buildingStructure: [
        //   {required: true, message: '请选择房屋结构', trigger: 'blur'},
        // ],
        // kingpostType: [
        //   {required: true, message: '请选择主梁类型', trigger: 'blur'},
        // ],
        // roofType: [
        //   {required: true, message: '请选择屋顶类型', trigger: 'blur'},
        // ],
        // houseType: [
        //   {required: true, message: '请选择房屋类型', trigger: 'blur'},
        // ],
        // shootType: [
        //   {required: true, message: '请选择拍摄方式', trigger: 'blur'},
        // ],
        // noFlyImgs: [
        //   {required: true, message: '请上传禁飞图片', trigger: 'blur'},
        // ],
        // roofPhotoOne: [
        //   {required: true, message: '请上传屋顶照片', trigger: 'blur'},
        // ],
        // roofValue: [
        //   {required: true, message: '请上传屋顶视频', trigger: 'blur'},
        // ],
        // whitePaperPhoto: [
        //   {required: true, message: '请上传用户手持明白纸照片', trigger: 'blur'},
        // ],
        // houseOwnership: [
        //   {required: true, message: '请选择房屋所有权', trigger: 'blur'},
        // ],
        // surveyRecord: [
        //   {required: true, message: '请上传踏勘记录', trigger: 'blur'},
        // ],
        // buildingHeight: [
        //   {required: true, message: '请输入建筑高度', trigger: 'blur'},
        // ],
      },
      show: false,
      labelStyle: {'align-self': 'start', 'font-size': '14px'},
      // project ---------
      projectList: [],
      agentList: [], // 代理商列表
      // 租金列表
      rentStandardList: [],
      // material
      // 方案规格
      materialList: {},
      // 是否显示组件弹窗
      visible: false,
      selectList: [],
      curType: '',
      curIndex: 0,
      assemblyList: [], // 组件列表
      gridConnectionList: [], // 并网箱列表
      inverterList: [], // 逆变器列表
      gridSupportList: [], // 并网支架列表
      // capacity
      showSchemeType: false,
      showSchemeName: false,
      planList: [],
      planTypeList: [],
      planNameList: [],
      attach: [],
      designDrawingsName: [],
    }
  },
  watch: {
    formData: {
      handler(val) {
        this.$forceUpdate();
      },
      deep: true,
    },
    // stationId(val) {
    //   if (val) {
    //     this.id = val;
    //     this.getDetail(val);
    //   }
    // },
    'formData.id': {
      handler: function(id) {
        if(!id) return;
        this.getPlanDetail(id);
      },
      deep: true,
    },
    assemblyList: {
      handler: function(val, oldVal) {
        this.handleItemList();
      },
      deep: true,
    },
    gridConnectionList: {
      handler: function(val, oldVal) {
        this.handleItemList();
      },
      deep: true,
    },
    inverterList: {
      handler: function(val, oldVal) {
        this.handleItemList();
      },
      deep: true,
    },
    gridSupportList: {
      handler: function(val, oldVal) {
        this.handleItemList();
      },
      deep: true,
    },
    // capacity
    "formData.schemeType": {
      handler: function (val, oldVal) {
        if (val === PLAN_TYPE.STANDARD) {
          this.planList = [{
            typeName: this.formData.schemeTypeName,
            planTypeId: this.formData.schemeTypeId,
            name: this.formData.schemeName,
            id: this.formData.schemeId,
            attach: this.formData.attach2, // 接口无参考图纸字段
            schemeId: this.formData.schemeId,
          }]
          console.log(this.planList,this.formData, 555)
          return
        }
        if (!this.formData.composePlanVOList || this.formData.composePlanVOList.length === 0){
          this.formData.composePlanVOList = [{
            typeName: '',
            planTypeId: '',
            name: '',
            id: '',
            attach: '',
            schemeId: '',
          }]
          return;
        }
        this.planList = this.formData.composePlanVOList?.map(item => {
          return {
            typeName: item.planType,
            planTypeId: item.planTypeId,
            name: item.name,
            id: item.planId,
            attach: item.attach,
            schemeId: item.schemeId,
          }
        })
      },
      deep: true,
      immediate: true,
    },
  },
  onLoad(option){
    if (option.id) {
      this.id = option.id;
    }
    this.init()
  },
  mounted() {
  },
  methods: {
    async init() {
      if (this.id) {
        console.log(this.id, 88)
        await this.getDetail(this.id);
      }
      // project------
      this.getProjectList();
      this.getAgentList();
      // material
      if (!this.assemblyList || this.assemblyList.length === 0) this.addModule('zjs', 0);
      if (!this.gridConnectionList || this.gridConnectionList.length === 0) this.addModule('boxs', 0);
      if (!this.inverterList || this.inverterList.length === 0) this.addModule('inverters', 0);
      if (!this.gridSupportList || this.gridSupportList.length === 0) this.addModule('zhij', 0);
      this.initMaterialList();
      // capacity
      this.getPlanLTypeList();
    },
    handleChange() {
      console.log('change')
    },
    // 获取详情
    async getDetail(id) {
      const { data } = await getCustomerEntryDetail(id);
      this.formData = Object.assign({}, this.formData, data);
      // 临时处理 todo...
      let arr = this.formData.noFlyImgList || [];
      debugger
      if (arr.length > 0) {
        this.formData.noFlyImgs = arr[0]?.fullPath;
      } else {
        this.formData.noFlyImgs = '';
      }
      if (arr.length > 1) {
        this.formData.noFlyImgs1 = arr[1]?.fullPath;
      } else {
        this.formData.noFlyImgs1 = '';
      }
    },
    // 处理禁飞图片 临时方案
    handleNoflyImage(data) {
      const arr = [];
      data.noFlyImgs && arr.push(data.noFlyImgs);
      data.noFlyImgs1 && arr.push(data.noFlyImgs1);
      data.noFlyImgs = arr.join(',');
    },
    // 处理方案设计图名称
    handleDesignDrawingsName(data) {
      if (this.formData.schemeType === PLAN_TYPE.STANDARD) {
        this.formData.schemeName = this.formData.schemeName;
        return;
      }
    },
    // 根据rules校验必填项
    validate(){
      const rules = this.rules;
      const keys = Object.keys(rules);
      const formData = this.formData;
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i];
        const rule = rules[key];
        if (rule && rule.length > 0) {
          for (let j = 0; j < rule.length; j++) {
            const item = rule[j];
            if (item.required && !formData[key]) {
              console.log(key, formData[key], formData, 'error')
              uni.showToast({
                title: item.message,
                icon: 'none',
                duration: 2000
              })
              return false;
            }
          }
        }
      }
      return true;
    },
    // 去掉冗余字段
    filterFeilds(data) {
      delete data.noFlyImgs1;
      return data;
    },
    // 暂存
    async save() {
      // 校验
      if(!this.validate()) return;
      // try {
        // await this.$refs.formDataRef.validate()
      // } catch (error) {
      //   console.log(error)
      //   uni.showToast({
      //     title: '请先完善银行卡相关信息',
      //     icon: 'none',
      //     duration: 2000
      //   })
      //   return;
      // }
      this.filterItemList();
      this.filterComposePlanVOList();
      this.formData.status = STATION_STATUS.TEMP;
      const cloneData = JSON.parse(JSON.stringify(this.formData));
      filerImageUrlParams(cloneData);
      this.handleNoflyImage(cloneData)
      this.filterFeilds(cloneData);
      const { data } = await saveOrEditCustomerEntry(cloneData);
      uni.showToast({
        title: '暂存成功',
        icon: 'none',
        duration: 2000
      })
      // 重定向到编辑页面
      if (!this.id) {
        uni.redirectTo({
          url: `/pages/index/home/enter/edit/index?id=${data}`
        })
      }
    },
    // 过滤空composePlanVOList
    filterComposePlanVOList() {
      if (!this.formData.composePlanVOList) this.formData.composePlanVOList = [];
      this.formData.composePlanVOList = this.formData?.composePlanVOList?.filter(item => item.name !== '' || item.planType !== '' || item.attach !== '');
    },
    // 过滤空itemList
    filterItemList() {
      if (!this.formData?.itemList) {
        this.formData.itemList = [];
      }
      this.formData.itemList = this.formData?.itemList?.filter(item => item.itemTypeId !== '');
    },
    // 返回上一页
    cancel() {
      uni.navigateBack({
        delta: 1
      })
    },
    // priject -----

    async getProjectList(){
      const { user } = await getUserInfoApi();
      const { data } = await getProjectListApi({ userId: user.userId, type: 1 });
      this.projectList = data;
    },
    // 获取合作年限和租金下拉列表数据
    async getProjectInfoDetail() {
      const { data } = await getProjectInfoDetailApi(this.formData.projectId);
      this.rentStandardList = data.variables;
    },
    projectChange(project) {
      this.formData.projectCode = project.code;
      this.formData.projectId = project.id;
      this.formData.payCycle = project.payCycle;
      this.formData.projectName = project.name;
      this.formData.productLineName = project.productLineName;
      this.getProjectInfoDetail();
    },
    // 获取代理商列表
    async getAgentList() {
      const { data } = await getProjectCompanyList();
      this.agentList = data;
    },
    // owner---
    cityChange(arr) {
      this.initLngLat();
    },
    // 根据省市区+详细地址 获取坐标
    async initLngLat() {
      const {province, city, area, address} = this.formData;
      const { data } = await getLngLatByAddressApi([province, city, area, address].join(''));
      if(data){
        this.formData.longitude = data.split(',')[0];
        this.formData.latitude = data.split(',')[1];
      }
    },
    // 银行卡上传完成
    bankCardUploadComplete(url, data) {
      if (data) {
        this.formData.bankName = data.info?.bankName || this.formData.bankName;
        this.formData.bankCode = data.info?.cardNumber || this.formData.bankCode;
      }
    },
    // js根据地址字符串通过正则表达式匹配字符串里面的省市区
    async matchCityByAddress(addressStr) {
      const reg = /.+?(省|市|自治区|自治州|县|区)/g;
      const addArr = addressStr.match(reg);
      if (addArr.length > 0) {
        this.formData.province = addArr[0];
        this.formData.address= addressStr.replace(addArr[0], '');
      }
      if (addArr.length > 1) {
        this.formData.city = addArr[1];
        this.formData.address = addressStr.split(addArr[1])[1];
      }
      if (addArr.length > 2) {
        this.formData.area = addArr[2];
        this.formData.address = addressStr.split(addArr[2])[1];
      }
    },
    // 银行卡上传完成
    idCardFrontUploadComplete(url, data) {
      if (data) {
        try{
          this.formData.idCardFront = url;
          this.formData.idCode = data.info.face.data.idNumber || this.formData.idNumber;
          this.formData.tenantName = data.info.face.data.name || this.formData.name;
          this.matchCityByAddress(data.info.face.data.address);
        } catch(e) {
          console.log(e)
        }
      }
    },
    // material ----
    // 组装itemList
    handleItemList() {
      this.formData.itemList = [
        ...this.assemblyList,
        ...this.gridConnectionList,
        ...this.inverterList,
        ...this.gridSupportList
      ];
    },
    // 获取方案详情
    async getPlanDetail(id) {
      const { data } = await getPlanDetailApi(id);
      if (this.formData.schemeType === PLAN_TYPE.STANDARD) {
        this.formData.schemeType = data.schemeType;
        this.assemblyList = data.assemblyList;
        this.gridConnectionList = data.gridConnectionList;
        this.inverterList = data.inverterList;
        this.gridSupportList = data.gridSupportList;
        return
      }
      if(data.planList.length > 0){
        this.planList = data.planList?.map(item => {
          return {
            typeName: item.planType,
            planTypeId: item.planTypeId,
            name: item.name,
            id: item.planId,
            attach: item.attach,
            schemeId: item.id,
            attachName: item.attachName,
          }
        })
      }
    },
    // 初始化方案规格
    async initMaterialList() {
      const { data } = await getElectricPlanAll();
      this.materialList = data;
      this.materialList.zjs.forEach(item => {
        item.name = item.materialSpecs
      })
      this.materialList.zhij.forEach(item => {
        item.name = item.materialSpecs
      })
      this.materialList.inverters.forEach(item => {
        item.name = item.materialSpecs
      })
      this.materialList.boxs.forEach(item => {
        item.name = item.materialSpecs
      })
    },
    showSelect(type, index) {
      this.curType = type;
      this.curIndex = index;
      this.selectList = this.materialList[type];
      this.visible = true;
    },
    // 添加模块 在某一行后面追加一个模块
    addModule(type, index) {
      this[disc[type]].splice(index + 1, 0, {
        itemTypeId: '',
        itemTypeName: '',
        num: '',
        spec: '',
      });
    },
    // 删除模块
    deleteModule(type, index) {
      this[disc[type]].splice(index, 1);
    },
    // 选择材料
    selectMaterial(item) {
      this[disc[this.curType]][this.curIndex].spec = item.materialSpecs;
      this[disc[this.curType]][this.curIndex].itemTypeId = item.materialTypeId;
      this[disc[this.curType]][this.curIndex].itemTypeName = item.materialTypeName;
      this[disc[this.curType]][this.curIndex].name = item.name;
      this.visible = false;
    },
    // capital ----
    // 获取方案列表
    async getPlanLTypeList() {
      const { data } = await findAllPlan();
      this.planTypeList = data;
    },
    schemeTypeNameChange(selection, plan) {
      // plan.lanTypeId  =typeId,
      // plan = Object.assign(plan, selection);
      this.planNameList = selection.plans;
      plan.typeName = selection.name;
      plan.planTypeId = selection.id;
      // plan.typeId = selection.typeName;
      // plan.planId = selection.id;
      // console.log(selection, 2222)
      this.handleFormData();
    },
    getPlans(planTypeId){
      if (planTypeId) {
        return this.planTypeList.find(item => item.id === planTypeId).plans;
      }
      return []
    },
    // 选择方案名称
    schemeNameChange(selection, plan) {
      plan.planTypeId = selection.planTypeId;
      plan.planType = selection.planType;
      // plan.planId = selection.id;
      plan.name = selection.name;
      plan.attach = selection.attach;
      plan.schemeId = selection.id;
      console.log(plan, 2222)
      this.handleFormData();
    },
    // 组装formData
    handleFormData() {
      if (this.formData.schemeType === PLAN_TYPE.STANDARD) {
        this.formData.schemeTypeId = this.planList[0].planTypeId;
        this.formData.schemeTypeName = this.planList[0].typeName;
        this.formData.schemeId = this.planList[0].schemeId;
        this.formData.schemeName = this.planList[0].name;
        this.formData.attach = this.planList[0].attach;
        this.formData.composePlanVOList = [];
      } else {
        this.formData.composePlanVOList = this.planList.map(item => {
          return {
            planTypeId: item.planTypeId,
            planType: item.typeName,
            planId: item.schemeId,
            name: item.name,
            attach: item.attach,
            schemeId: item.schemeId,
          }
        })
      }
    },
    addPlan() {
      this.planList.push({
        typeName: "",
        planTypeId: "",
        name: "",
        id: "",
        attach: "",
        schemeId: "",
      })
      this.handleFormData();
    },
    deletePlan(index) {
      this.planList.splice(index, 1);
      this.handleFormData();
    },
  }
}
</script>

<template>
  <view class="container">
    <u--form
        labelPosition="left"
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        labelWidth="100"
        :labelStyle="labelStyle"
    >
      <!--<project :formData="formData" :disabled="editable"/>-->
      <module-card title="项目信息">
        <u-form-item
            label="产品编码"
            prop="projectCode"
            borderBottom
            ref="item1"
            required
        >
          <u--input
              v-model="formData.projectCode"
              border="none"
              placeholder="请输入项目编码"
              :disabled="disabled"
              disabled-color="#fff"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="产品名称"
            prop="projectId"
            ref="item1"
            :borderBottom="rentStandardList.length === 0"
            required
        >
          <u-select
              v-model="formData.projectId"
              placeholder="请选择产品"
              :options="projectList"
              @change="projectChange"
              :props="{
                label: 'name',
                value: 'id'
              }"
              :disabled="disabled"
          ></u-select>
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>
        <view class="table-wrap" v-if="rentStandardList.length > 0">
          <uni-table border emptyText="没有更多租金相关信息" >
            <!-- 表格数据行 -->
            <uni-tr v-for="(item, index) in rentStandardList" :key="index">
              <uni-td>合作年限</uni-td>
              <uni-td>{{item.startYear}}-{{item.endYear}}年</uni-td>
              <uni-td>租金标准</uni-td>
              <uni-td>{{item.unitPrice}}元/块/年</uni-td>
            </uni-tr>
          </uni-table>
        </view>
        <!--todo...-->
        <u-form-item
            label="所属项目公司"
            prop="projectCompanyId"
            borderBottom
            ref="item1"
        >
          <u-select
              v-model="formData.projectCompanyId"
              placeholder="请选择所属项目公司"
              :options="agentList"
              :disabled="disabled"
              :props="{
                label: 'name',
                value: 'id'
              }"
          ></u-select>
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>
        <u-form-item
            label="租金支付方式"
            prop="payCycle"
            borderBottom
            ref="item1"
        >
          <u-select
              v-model="formData.payCycle"
              placeholder="请选择租金支付方式"
              :disabled="true"
              :options="[
                  { label: '按月支付', value: '1'},
                  { label: '按季支付', value: '2'},
                  { label: '按年支付', value: '3'},
                 ]"
          ></u-select>
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>
        <u-form-item
            label="备案装机容量"
            prop="beianCapacity"
            borderBottom
            ref="item1"
            required
        >
          <u--input
              v-model="formData.beianCapacity"
              border="none"
              :disabled="disabled"
              disabled-color="#fff"
              placeholder="请输入备案装机容量"
          >
            <template slot="suffix">W</template>
          </u--input>
        </u-form-item>
        <u-form-item
            label="备案方式"
            prop="beianMode"
            borderBottom
            ref="item1"
            required
        >
          <u-select
              v-model="formData.beianMode"
              :disabled="disabled"
              placeholder="请选择备案方式"
              :options="[
                  { label: '自然人备案', value: '0'},
                  { label: '项目公司备案', value: '1'},
                 ]"
          ></u-select>
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>
        <u-form-item
            label="备案号"
            prop="filingNumber"
            borderBottom
            ref="item1"
        >
          <u--input
              v-model="formData.filingNumber"
              border="none"
              placeholder="请输入备案号"
              :disabled="disabled"
              disabled-color="#fff"
          ></u--input>
        </u-form-item>
      </module-card>
      <!--<owner v-model="formData" :disabled="editable" />-->
      <module-card title="业主信息">

        <u-form-item
            label="业主姓名"
            prop="tenantName"
            borderBottom
            ref="item1"
            required
        >
          <u--input
              v-model="formData.tenantName"
              border="none"
              placeholder="请输入业主姓名"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="联系电话"
            prop="mobile"
            borderBottom
            ref="item1"
            required
        >
          <u--input
              v-model="formData.mobile"
              border="none"
              placeholder="请输入联系电话"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="身份证号"
            prop="idCode"
            borderBottom
            ref="item1"
            required
        >
          <u--input
              v-model="formData.idCode"
              border="none"
              placeholder="请输入身份证号"
          ></u--input>
        </u-form-item>
        <u-form-item
            label="安装地址"
            prop="address"
            borderBottom
            ref="item1"
            required
        >
          <city-select
              :province.sync="formData.province"
              :city.sync="formData.city"
              :area.sync="formData.area"
              @confirm="cityChange"
          />
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>
        <u-form-item
            label=" "
            prop="address"
            borderBottom
            ref="item1"
        >
          <view>
            <u--input
                v-model="formData.address"
                border="none"
                placeholder="请输入安装地址"
                @blur="initLngLat"
            ></u--input>
          </view>
        </u-form-item>
        <u-form-item
            label="经纬度信息"
            prop="longitude"
            borderBottom
            ref="item1"
        >
          <view v-if="formData.longitude && formData.latitude">{{formData.longitude}},{{formData.latitude}}</view>
          <view v-else>请先选择城市</view>
        </u-form-item>
        <u-form-item
            label="身份证照片"
            ref="item1"
            required
        >
          <view class="cell">
            <view class="cell-bd">
              <image-upload v-model="formData.idCardFront" url="/applet/uploadImageIden" @change="idCardFrontUploadComplete">
                <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
                       mode="widthFix" style="width: 125px;height: 75px;"></image>
              </image-upload>
            </view>
            <view class="cell-bd ml-15">
              <image-upload v-model="formData.idCardBack" >
                <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
                       mode="widthFix" style="width: 125px;height: 75px;"></image>
              </image-upload>
            </view>
          </view>
        </u-form-item>
        <u-form-item
            label="开户银行"
            prop="bankName"
            borderBottom
            ref="item1"
            required
        >
          <view>
            <u--input
                v-model="formData.bankName"
                border="none"
                placeholder="请输入开户银行"
            ></u--input>
          </view>
        </u-form-item>
        <u-form-item
            label="开户行行号"
            prop="bankNumber"
            borderBottom
            ref="item1"
            required
        >
          <view>
            <u--input
                v-model="formData.bankNumber"
                border="none"
                placeholder="请输入开户行行号"
            ></u--input>
          </view>
        </u-form-item>
        <u-form-item
            label="开户支行"
            prop="bankBranch"
            borderBottom
            required
            ref="item1"
        >
          <view>
            <u--input
                v-model="formData.bankBranch"
                border="none"
                placeholder="请输入开户支行"
            ></u--input>
          </view>
        </u-form-item>
        <u-form-item
            label="银行账号"
            prop="bankCode"
            borderBottom
            required
            ref="item1"
        >
          <view>
            <u--input
                v-model="formData.bankCode"
                border="none"
                placeholder="请输入银行账号"
            ></u--input>
          </view>
        </u-form-item>
        <u-form-item
            label="银行卡照片"
            prop="bankCard"
            borderBottom
            ref="item1"
            required
        >
          <image-upload v-model="formData.bankCard" url="/applet/uploadImageYhk" @change="bankCardUploadComplete">
            <!--银行卡示意图-->
            <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
                   mode="widthFix" style="width: 125px;height: 75px;"></image>
          </image-upload>
        </u-form-item>
      </module-card>
      <!--<house v-model="formData" :disabled="editable" />-->
      <module-card title="房屋信息">
        <u-form-item
            label="房屋结构"
            prop="buildingStructure"
            borderBottom
            ref="item1"
            required
        >
          <u-select
              v-model="formData.buildingStructure"
              placeholder="请选择房屋结构"
              :options="[{ label: '框架' }, { label: '砖木' }, { label: '砖混' }]"
              :disabled="disabled"
              :props="{label: 'label', value: 'label'}"
          ></u-select>
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>
        <u-form-item
            label="主梁类型"
            prop="kingpostType"
            borderBottom
            ref="item1"
            required
        >
          <u-select
              v-model="formData.kingpostType"
              placeholder="请选择主梁类型"
              :options="[{ label: '钢筋混凝土梁' }, { label: '钢梁' }, { label: '木梁' }, { label: '其他' } ]"
              :disabled="disabled"
              :props="{label: 'label', value: 'label'}"
          ></u-select>
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>
        <u-form-item
            label="房屋类型"
            prop="houseType"
            borderBottom
            ref="item1"
            required
        >
          <u-select
              v-model="formData.houseType"
              placeholder="请选择房屋类型"
              :options="[{ label: '个人屋顶' }, { label: '公共屋顶' }]"
              :disabled="disabled"
              :props="{label: 'label', value: 'label'}"
          ></u-select>
          <u-icon
              slot="right"
              name="arrow-right"
          ></u-icon>
        </u-form-item>
        <u-form-item
            label="屋顶类型"
            prop="roofType"
            borderBottom
            ref="item1"
            required
        >
          <u-radio-group
              v-model="formData.roofType"
              placement="row"
              class="radio-group"
          >
            <u-radio
                class="item"
                iconColor="#113d48"
                :customStyle="{marginRight: '20px'}"
                active-color="#dab386"
                label="平顶屋"
                name="1"
            ></u-radio>
            <u-radio
                class="item"
                iconColor="#113d48"
                active-color="#dab386"
                label="斜屋顶"
                name="2"
            ></u-radio>
            <u-radio
                class="item"
                iconColor="#113d48"
                active-color="#dab386"
                label="其他"
                name="3"
            ></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item
            label="拍摄方式"
            prop="shootType"
            borderBottom
            ref="item1"
            required
        >
          <u-radio-group
              v-model="formData.shootType"
              placement="row"
              class="radio-group"
          >
            <u-radio class="item"
                     :customStyle="{ marginRight: '20px'}"
                     active-color="#dab386"
                     label="无人机拍摄"
                     name="1"
            ></u-radio>
            <u-radio
                class="item"
                active-color="#dab386"
                label="手机拍摄"
                name="2"
            ></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item
            label="禁飞图片"
            prop="noFlyImgs"
            borderBottom
            ref="item1"
            required
            v-if="formData.shootType === '2'"
        >
          <view class="img-wrap">
            <u-row :gutter="10">
              <u-col :span="4">
                <image-upload v-model="formData.noFlyImgs"/>
              </u-col>
              <u-col :span="4">
                <image-upload v-model="formData.noFlyImgs1" style="margin-left: 10px"/>
              </u-col>
              <u-col :span="4"></u-col>
            </u-row>
          </view>
        </u-form-item>
        <u-form-item
            label="屋顶照片"
            prop="roofPhotoOne"
            borderBottom
            ref="item1"
            required
        >
          <view>
            <u-row :gutter="10">
              <u-col :span="4">
                <image-upload v-model="formData.roofPhotoOne"/>
                <view class="roof-subtitle mb-10">俯拍图</view>
              </u-col>
              <u-col :span="4">
                <image-upload v-model="formData.roofPhotoTwo"/>
                <view class="roof-subtitle mb-10">角度南</view>
              </u-col>
              <u-col :span="4">
                <image-upload v-model="formData.roofPhotoThree"/>
                <view class="roof-subtitle mb-10">东南角</view>
              </u-col>
            </u-row>
            <u-row :gutter="10">
              <u-col :span="4">
                <image-upload v-model="formData.roofPhotoFour"/>
                <view class="roof-subtitle">西南角</view>
              </u-col>
              <u-col :span="4">
                <image-upload v-model="formData.roofPhotoInterior"/>
                <view class="roof-subtitle">房屋内部</view>
              </u-col>
              <u-col :span="4">
                <image-upload v-model="formData.dimensionsPhotoThickness"/>
                <view class="roof-subtitle">楼顶厚度</view>
              </u-col>
            </u-row>
            <u-row :gutter="10">
              <u-col :span="4">
                <image-upload v-model="formData.roofPhotoFive"/>
                <view class="roof-subtitle">补充</view>
              </u-col>
              <u-col :span="4">
                <image-upload v-model="formData.roofPhotoSix"/>
                <view class="roof-subtitle">补充</view>
              </u-col>
              <u-col :span="4"></u-col>
            </u-row>
          </view>
        </u-form-item>
        <u-form-item
            label="屋顶视频"
            prop="roofValue"
            borderBottom
            ref="item1"
            required
        >
          <image-upload v-model="formData.roofValue" accept="video" />
        </u-form-item>
        <u-form-item
            label="房产证"
            prop="houseOwnership"
            borderBottom
            ref="item1"
            required
        >
          <u-row :gutter="10">
            <u-col :span="4">
              <image-upload v-model="formData.houseOwnership" />
            </u-col>
            <u-col :span="4">
              <image-upload v-model="formData.houseOwnershipOne" />
            </u-col>
            <u-col :span="4">
              <image-upload v-model="formData.houseOwnershipTwo" />
            </u-col>
          </u-row>
        </u-form-item>
        <u-form-item
            label="踏勘记录表"
            prop="surveyRecord"
            borderBottom
            ref="item1"
            required
        >
          <u-row :gutter="10">
            <u-col :span="4">
              <image-upload v-model="formData.surveyRecord" />
            </u-col>
            <u-col :span="4">
              <image-upload v-model="formData.surveyRecord2" />
            </u-col>
            <u-col :span="4">
              <image-upload v-model="formData.surveyRecord3" />
            </u-col>
          </u-row>
        </u-form-item>
        <u-form-item
            label="用户手持明白纸照片"
            prop="whitePaperPhoto"
            borderBottom
            ref="item1"
            required
        >
          <image-upload v-model="formData.whitePaperPhoto" />
        </u-form-item>
        <u-form-item
            label="备案文件"
            prop="filingDocumentPhoto"
            borderBottom
            ref="item1"
        >
          <u-row :gutter="10">
            <u-col :span="4">
              <image-upload v-model="formData.filingDocumentPhoto" />
            </u-col>
            <u-col :span="4">
              <image-upload v-model="formData.filingDocumentPhoto2" />
            </u-col>
            <u-col :span="4">
              <image-upload v-model="formData.filingDocumentPhoto3" />
            </u-col>
          </u-row>
        </u-form-item>
        <u-form-item
            label="并网距离"
            prop="distance"
            borderBottom
            ref="item1"
            required
        >
          <u-input
              v-model="formData.distance"
              border="none"
              placeholder="请输入并网距离"
          >
            <template slot="suffix">米</template>
          </u-input>
        </u-form-item>
        <u-form-item
            label="方位角"
            prop="azimuth"
            borderBottom
            ref="item1"
            required
        >
          <view>
            <u-radio-group
                v-model="formData.azimuth"
                placement="row"
                class="radio-group"
            >
              <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="正南" :name="AZIMUTH.SOUTH"></u-radio>
              <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="南偏东" :name="AZIMUTH.SOUTH_EAST"></u-radio>
              <u-radio class="item" active-color="#dab386" label="南偏西" :name="AZIMUTH.SOUTH_WEST"></u-radio>
            </u-radio-group>
            <view v-if="formData.azimuth !== AZIMUTH.SOUTH">
              <u-input
                  v-model="formData.angle"
                  border="none"
                  placeholder="请输入角度"
                  :customStyle="{marginTop: '10px'}"
              ></u-input>
            </view>
          </view>
        </u-form-item>
        <u-form-item
            label="建筑高度"
            prop="buildingHeight"
            borderBottom
            ref="item1"
            required
        >
          <u-input
              v-model="formData.buildingHeight"
              border="none"
          >
            <template slot="suffix">米</template>
          </u-input>
        </u-form-item>
        <u-form-item
            label="还款方式"
            prop="repaymentMethod"
            borderBottom
            ref="item1"
        >

          <u-radio-group
              v-model="formData.repaymentMethod"
              placement="row"
              class="radio-group"
          >
            <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="一类卡" name="0"></u-radio>
            <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="二类卡" name="1"></u-radio>
            <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="光E宝" name="2"></u-radio>
            <!--<u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="其他" name="0"></u-radio>-->
          </u-radio-group>
        </u-form-item>
        <u-form-item
            label="备注"
            prop="remarks"
            ref="item1"
        >
          <u--textarea v-model="formData.remarks" placeholder="请输入备注" count  border="none"></u--textarea>
        </u-form-item>
      </module-card>

      <module-card title="方案信息">
        <!--<material :formData="formData" />-->

        <!--<capacity :formData="formData"/>-->

        <u-form-item
            label="设计方案"
            prop="schemeType"
            borderBottom
            ref="item1"
        >

          <u-radio-group
              v-model="formData.schemeType"
              placement="row"
              class="radio-group"
          >
            <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="标准方案" :name="PLAN_TYPE.STANDARD"></u-radio>
            <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="组合方案" :name="PLAN_TYPE.COMBINATION"></u-radio>
          </u-radio-group>
        </u-form-item>
        <view v-for="(plan, index) in planList" :key="index">
          <u-form-item
              label="方案类型"
              :prop="plan.typeName"
              borderBottom
              borderTop
              ref="item1"
          >
            <u-select
                v-model="plan.typeName"
                placeholder="请选择方案类型"
                :options="planTypeList"
                :disabled="disabled"
                :props="{label: 'name', value: 'name'}"
                @change="(selection) => schemeTypeNameChange(selection, plan)"
            ></u-select>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
              label="方案名称"
              :prop="plan.name"
              borderBottom
              ref="item1"
          >
            {{plan.planTypeId}}
            <u-select
                v-model="plan.name"
                placeholder="请选择方案名称"
                :options="getPlans(plan.planTypeId)"
                :disabled="disabled"
                :props="{label: 'name', value: 'name'}"
                @change="(selection) => schemeNameChange(selection, plan)"
            ></u-select>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
              label="参考图纸"
              :prop="plan.attach"
              ref="item1"
              :borderBottom="formData.schemeType === PLAN_TYPE.STANDARD"
          >
            <image-upload v-model="plan.attach" @change="handleFormData"/>
          </u-form-item>
          <view class="plus" v-if="formData.schemeType === PLAN_TYPE.COMBINATION">
            <u--text
                v-if="index === 0"
                class="text"
                prefixIcon="plus"
                iconStyle="font-size: 14px;margin-right:5px;color:#009999;"
                color="#009999"
                @click="addPlan"
                text="新增方案"
            ></u--text>
            <u--text
                v-else
                class="text"
                prefixIcon="trash"
                iconStyle="font-size: 16px;margin-right:5px;color:red;"
                color="red"
                @click="deletePlan(index)"
                text="删除"
            ></u--text>
          </view>
        </view>
        <u-form-item
            label="设计图纸"
            prop="designDrawings"
            borderBottom
            ref="item1"
        >
          <image-upload v-model="formData.designDrawings" />
        </u-form-item>
        <view class="group-title">设计安装容量</view>
        <view v-for="(assembly, index) in assemblyList" :key="index">
          <u-form-item
              label="组件"
              prop="userInfo.componentSpec"
              borderBottom
              @click="showSelect('zjs', index)"
              ref="item1"
              :borderBottom="false"
          >
            <text v-if="assembly.spec">{{ assembly.spec }}</text>
            <text v-else class="placeholder">请选择组件</text>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
              label="组件数量"
              prop="userInfo.sex"
              borderBottom
              ref="item1"
          >
            <u-input
                v-model="assembly.num"
                disabledColor="#ffffff"
                placeholder="请选择"
                border="none"
            >
              <template slot="suffix">
                <view class="link-btn" v-if="index === 0" @click="addModule('zjs', index)">+新增型号</view>
                <view class="link-btn" v-else @click="deleteModule('zjs', index)">删除</view>
              </template>
            </u-input>
          </u-form-item>
        </view>
        <view v-for="(inverter, index) in inverterList" :key="index">
          <u-form-item
              label="逆变器"
              borderBottom
              @click="showSelect('inverters', index)"
              ref="item1"
              :borderBottom="false"
          >
            <text v-if="inverter.spec">{{ inverter.spec }}</text>
            <text v-else class="placeholder">请选择逆变器</text>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
              label="逆变器数量"
              prop="userInfo.sex"
              borderBottom
              ref="item1"
          >
            <u-input
                v-model="inverter.num"
                disabledColor="#ffffff"
                placeholder="请输入逆变器"
                border="none"
            >
              <template slot="suffix">
                <view class="link-btn" v-if="index === 0" @click="addModule('inverters', index)">+新增型号</view>
                <view class="link-btn" v-else @click="deleteModule('inverters', index)">删除</view>
              </template>
            </u-input>
          </u-form-item>
        </view>
        <view v-for="(gridConnection, index) in gridConnectionList" :key="index">
          <u-form-item
              label="并网箱"
              borderBottom
              @click="showSelect('boxs', 0)"
              ref="item1"
              :borderBottom="false"
          >
            <text v-if="gridConnection.spec">{{ gridConnection.spec }}</text>
            <text v-else class="placeholder">请选择并网箱</text>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
              label="并网箱数量"
              prop="userInfo.sex"
              borderBottom
              ref="item1"
          >
            <u-input
                v-model="gridConnection.num"
                disabledColor="#ffffff"
                placeholder="请输入并网箱数量"
                border="none"
            >
              <template slot="suffix">
                <view class="link-btn" v-if="index === 0" @click="addModule('boxs', index)">+新增型号</view>
                <view class="link-btn" v-else @click="deleteModule('boxs', index)">删除</view>
              </template>
            </u-input>
          </u-form-item>
        </view>
        <view v-for="(gridSupport, index) in gridSupportList" :key="index">
          <u-form-item
              label="支架"
              borderBottom
              @click="showSelect('zhij', 0)"
              ref="item1"
              :borderBottom="false"
          >
            <text v-if="gridSupport.spec">{{ gridSupport.spec }}</text>
            <text v-else class="placeholder">请选择支架</text>
            <u-icon
                slot="right"
                name="arrow-right"
            ></u-icon>
          </u-form-item>
          <u-form-item
              label="支架数量"
              borderBottom
              ref="item1"
          >
            <u-input
                v-model="gridSupport.num"
                disabledColor="#ffffff"
                placeholder="请输入支架数量"
                border="none"
            >

              <template slot="suffix">
                <view class="link-btn" v-if="index === 0" @click="addModule('zhij', index)">+新增型号</view>
                <view class="link-btn" v-else @click="deleteModule('zhij', index)">删除</view>
              </template>
            </u-input>
          </u-form-item>
        </view>
        <u-action-sheet
            :show="visible"
            :actions="selectList"
            title="选择组件"
            @close="visible = false"
            @select="selectMaterial"
        >
        </u-action-sheet>
        <u-form-item
            label="备注"
            prop="schemeRemarks"
            ref="item1"
        >
          <u--textarea v-model="formData.schemeRemarks" placeholder="请输入备注" count border="none"></u--textarea>
        </u-form-item>
      </module-card>
    </u--form>
    <view class="cell footer" v-if="!disabled">
      <view class="cell-hd save"><u-button @click="cancel">取消</u-button></view>
      <view class="cell-bd submit"><u-button color="#dab386" type="primary" @click="save">暂存</u-button></view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.container{
  background: #eee;
  padding-bottom: 76px;
}
.radio-group{

}
//样式穿透

/deep/ .u-form-item__body__left__content{
  align-self: flex-start;
}
/deep/ .u-radio{
  //margin-right: 15px;
}
.group-title{
	font-size: 14px;
	color: #113d48;
	margin-top: 15px;
	margin-bottom: 10px;
}
.module{
	margin-bottom: 10px;
	background-color: #fff;
	padding: 20px 20px 0px 20px;
  &:last-child{
    margin-bottom: 0px;
  }
	&__title{
		font-size: 16px;
		border-bottom: 1px solid #eee;
		color: #113d48;
		padding-bottom: 10px;
		&__text{
			margin-left: 5px;
		}
	}
}
.footer{
	position: fixed;
	left: 0px;
	right: 0px;
	bottom: 0px;
  z-index: 9999;
	padding: 10px 5px;
	background: #fff;
	border-top: 1px solid #eee;
	.save{
		padding: 0 5px;
		button{
			min-width: 140px;
		}
	}
	.submit{
		padding: 0 5px;
		width: 100%;
	}
	button{
		margin: 0;
	}
}
.roof-subtitle{
  text-align: center;
  color: #888;
}
.mb-10{
  margin-bottom: 10px;
}
.ml-15{
  margin-left: 15px;
}
.plus{
  text-align: center;
  padding: 10px 0px 20px 0;
  border-bottom: 1px solid #eee;
  color: #888;
  .text{
    justify-content: center !important;
  }
}
.img-wrap{
	font-size: 0px;
}
</style>
